<template>
  <div id="map"></div>
</template>

<script setup>
console.log(ol, "ol");
// Mounted
const gd_vec = new ol.layer.Tile({
  title: "OSM图层",
  preload: 4,
  source: new ol.source.OSM(),
});
const gd_img = new ol.layer.Tile({
  title: "gaode_影像图层",
  source: new ol.source.XYZ({
    url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}",
    wrapX: false,
  }),
});
console.log(gd_vec, "gd_vec");
console.log(gd_img, "gd_img");
const map = new ol.Map({
  target: "map",
  layers: [gd_img,gd_vec],
  view: new ol.View({
    center: [114.3, 30.5],
    zoom: 4,
    // 投影：经纬度坐标系
    projection: "EPSG:4326",
  }),
});
console.log(map);
</script>

<style lang="scss" scoped>
#map {
  width: 100vw;
  height: 100vh;
}
</style>
